<template>
	<view>
		<view class="tab-nav">
			<scroll-view scroll-x="true" class="tab-nav-H">
				<block v-for="(item,index) in topList" :key="index">
					<view class="tan-nav-li" :class="{'active':navIndex==index}" @tap.stop="sectNav(index)">{{item.title_en || '--'}}</view>
				</block>
			</scroll-view>
		</view>
		<block v-for="(item,index) in bottomList" :key="index">
			<view class="cur-list" hover-class="active" @tap.stop="curback(item)">
				<view class="cur-list-l">
					<view>{{item.title_en || '--'}}</view>
				</view>
				<view class="cur-list-r">
					<view>{{i18n.Balance}} : {{item.balance || 0}}</view>
					<text>{{i18n.price}} : {{item.price || 0}} U</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		data() {
			return {
				navIndex:0,
				topList:[],
				bottomList:[]
			}
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'币种列表':'Currency list'
			})
			this.navIndex = 0
		},
		onLoad(e){
			this.topList = JSON.parse(e.list)
			let firstId = this.topList[0].id
			this.bottomList = this.topList.filter(item=>item.id!=firstId)
		},
		methods:{
			...mapMutations(['setTransactionCur']),
			curback(item){
				let info = {
					token_x:this.topList[this.navIndex],
					token_y:item
				}
				this.setTransactionCur(info)
				uni.navigateBack({
					delta:1
				})
			},
			sectNav(index){
				this.navIndex = index;
				let firstid = this.topList[index].id
				this.bottomList = this.topList.filter(item=>item.id!=firstid);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.tab-nav{
		display: flex;
		border-bottom:2upx solid #efefef;
		line-height: 100rpx;
		font-size: 28rpx;
		.tab-nav-H{
			white-space: nowrap;
			width: 100%;
			box-sizing: border-box;
			.tan-nav-li{
				display: inline-block;
				box-sizing: border-box;
				padding: 0 25rpx;
				&.active{
					color: #294362;
					position: relative;
					&::after{
						content: "";
						position: absolute;
						left: 50%;
						bottom: 4rpx;
						width: 60rpx;
						height: 4rpx;
						background-color: #294362;
						border-radius: 2rpx;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	.cur-list{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		justify-content: space-between;
		border-bottom:2upx solid #efefef;
		&:last-of-type{
			border-bottom: none;
		}
		&.active{
			background: #efefef;
		}
		.cur-list-l{
			view{
				line-height: 100rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.cur-list-r{
			text-align: right;
			view{
				font-size: 30rpx;
			}
			text{
				font-size: 26rpx;
			}
		}
	}
	
</style>
